<template>
    <div class="cate">
      <div class="cate_hander">
        <h1 class="cate_title">品类管理 -- 添加品类</h1>
      </div>
      <div class="cate_content">
        <el-form label-position="top" label-width="80px" :model="formLabelAlign">
          <el-form-item label="所属品类">
            <!-- <el-select v-model="formLabelAlign.region" placeholder="/所有">
              <el-option label="/所有/" value="shanghai"></el-option>
              <el-option label="/所有/加多宝" value="beijing"></el-option>
            </el-select> -->
            <el-select v-model="formLabelAlign.region"  @change="regionChange" placeholder="/所有">
              <el-option
                v-for="(item,index) in  list"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品类名称">
            <el-input placeholder="请输入品类名称" v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>
  
  <script>
  import { addcategory,categoryList } from "../../api/index";
  
  export default {
    data() {
      return {
        region1list:[],
        list:[],
        formLabelAlign: {
          region: "",
          name: ""
        }
      };
    },
    created(){
        categoryList().then(res => {
          this.region1list = res.data.data;
          // console.log(this.region1list)
          this.$nextTick(function(){
            for (let i = 0; i < this.region1list.length; i++) {
              this.list[i]= "/所有/"+this.region1list[i].name
            }
            console.log(this.list)
          })
          
      });
    },
    methods: {
      regionChange(v) {
        console.log(v)
        console.log(v.substring(4,v.size))
        this.region1list.map((item, i) => {
          if (item.name === v) {
            addcategory({categoryName: this.formLabelAlign.name }).then(res => {
              console.log(res.data);
              this.$message({
                message: `恭喜你,${res.data.data}`,
                type: "success"
              });
            this.$router.push("/product/index/cate")
            })
          }
        });
      },
      onSubmit() {
        console.log(this.formLabelAlign)
        console.log(this.region1list)
        // 添加一级品类
        // if (condition) {
  
        //    addcategory({categoryName: this.formLabelAlign.name }).then(res => {
        //     console.log(res.data);
        //     this.$message({
        //       message: `恭喜你,${res.data.data}`,
        //       type: "success"
        //     });
        //     this.$router.push("/product/index/cate")
        //   });
        // } 
        // // 添加二级品类
        // else {
        //   addcategory({parentId:v.id, categoryName: this.formLabelAlign.name }).then(res => {
        //     console.log(res.data);
        //     this.$message({
        //       message: `恭喜你,${res.data.data}`,
        //       type: "success"
        //     });
        //     this.$router.push("/product/index/cate")
        //   });
        // }
        
      }
    }
  };
  </script>
  
  
  <style lang="scss" scoped>
  @import "@/Scss/index.scss";
  .cate_content {
    @include Wm(95%);
  }
  .cate_hander {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cate_title {
    display: inline-block;
    font-weight: normal;
  }
  .cate {
    @include Wm(95%);
  }
  </style>